<template>
  <div class="home">
    <div class="head">
      <div class="head-info">
        <img :src="userInfo.avatar" alt="" />
        <div class="head-info-r">
          <p class="name">用户名：{{ userInfo.name }}</p>
          <p class="phone">{{ userInfo.phone }}</p>
          <p class="one">
            <span>{{ userInfo.role }}</span>
          </p>
        </div>
      </div>


      <!-- 销售任务 -->
      <div class="head-task" v-if="this.role != '二级分销商'">
        <div class="head-task-data">
          <div class="progerss">
            <span>销售任务</span>

            <van-progress
              :percentage="getProgress"
              stroke-width="12"
              track-color="#E4A308"
              :show-pivot="false"
              color="linear-gradient(180deg, #F9A553, #E44608)"
            />
          </div>
          <span class="num">{{ surplusData }}/150</span>
        </div>
        <p class="jy">
          离三个月150张销售目标还剩{{ getSurplus }}%，继续加油！
        </p>
      </div>
    </div>

    <!-- 销售数据 -->
    <div class="sale">
      <div class="sale-title">
        <div class="sale-title-l">
          <img src="../assets/数据.png" alt="" />
          <h3>销售数据</h3>
        </div>
        <div class="sale-t">
          <span>{{ currentTime }}更新</span>
          <img src="../assets/更新.png" alt="" />
        </div>
      </div>

      <div class="sale-data">
        <div class="sale-data-all">
          <div class="sale-data-item">
            <p>{{ saleData.allOrder }}</p>
            <p>总订单数</p>
          </div>
          <div class="sale-data-item">
            <p>{{ saleData.allDeal }}</p>
            <p>总成交额(元)</p>
          </div>
          <div class="sale-data-item">
            <p>{{ saleData.allProfit }}</p>
            <p>总收益(元)</p>
          </div>
        </div>
        <div class="sale-data-today">
          <div class="sale-data-item">
            <p>{{ saleData.todayOrder }}</p>
            <p>今日订单数</p>
          </div>
          <div class="sale-data-item">
            <p>{{ saleData.todayOrderPrice }}</p>
            <p>今日订单金额(元)</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 菜单模块切换 -->
    <div class="menu-box">
      <ul class="menu">
        <li
          @click="changeMode('DistributeGoods')"
          :class="[activeMode == 'DistributeGoods' ? 'active' : '']"
        >
          <span>分销商品</span>
        </li>
        <li
          @click="changeMode('PolicyConsultation')"
          :class="[activeMode == 'PolicyConsultation' ? 'active' : '']"
        >
          <span>政策资讯</span>
        </li>
      </ul>
      <button
        class="gen"
        v-if="activeMode == 'DistributeGoods'"
        @click="genQRcode"
      >
        点击生成二维码海报
      </button>
      <div
        class="components"
        :class="[activeMode == 'PolicyConsultation' ? 'policy-com' : '']"
      >
        <distribute-goods
          v-if="activeMode == 'DistributeGoods'"
        ></distribute-goods>
        <policy-consultation
          v-if="activeMode == 'PolicyConsultation'"
        ></policy-consultation>
      </div>
    </div>

    <!-- 弹出层 -->
    <van-popup v-model="showQRcode" position="bottom" round>
      <div class="qr">
        <QrCodePoster @stopClick="stopClick" />
        <ul class="qr-menu">
          <li @click="shareFrinend">
            <img src="../assets/微信.png" alt="" />
            <span>分享好友</span>
          </li>
          <li @click="savePoster">
            <img src="../assets/下载.png" alt="" />
            <span>保存海报</span>
          </li>
        </ul>
      </div>
    </van-popup>

    <Tabbar />
  </div>
</template>
 
<script >
import DistributeGoods from "../components/distributeGoods.vue";
import PolicyConsultation from "../components/policyConsultation.vue";
import QrCodePoster from "../components/QRCodePoster.vue";
import Tabbar from "../components/tabbar.vue";
export default {
  name: "home",
  components: {
    DistributeGoods, // 分销商品
    PolicyConsultation, // 政策资讯
    Tabbar,
    QrCodePoster,
  },
  data() {
    return {
      userInfo: {
        // 用户信息
        avatar: require("../assets/头像.png"), // 头像
        phone: "158****789",
        name: "小鹏",
        role: "一级分销商", // 等级
      },
      currentTime: "7/25 14:58", // 当前时间
      surplusData: 58, // 剩余进度数据
      activeMode: "", // 切换菜单组件  商品  | 资讯
      saleData: {
        // 销售数据
        allOrder: "588", // 总订单
        allDeal: "18990.0", // 总成交
        allProfit: "6990.0", // 总销售
        todayOrder: "48", // 今日订单
        todayOrderPrice: "1590.0", // 今日订单金额
      },
      showQRcode: false,
      role:"",
    };
  },
  computed: {},
  watch: {
    // 从vuex取出当前点击的模块， 有值就用vuex 的，没有就默认显示 分销商品
    "$store.state.activeMode": {
      handler: function (n, o) {
        if (n != "") {
          this.activeMode = n;
        } else {
          this.activeMode = "DistributeGoods";
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.role = this.$store.state.role;
  },
  methods: {
    stopClick(){
      this.showQRcode = false; 
    },
    // 切换分类模块
    changeMode(component) {
      this.activeMode = component;
      this.$store.commit("setActiveMode", component);
    },
    // 生成二维码海报
    genQRcode() {
      this.showQRcode = true;
      // this.$router.push('/qrCodePoster')
    },
    // 分享好友
    shareFrinend() {},
    // 保存海报
    savePoster() {},
  },
  computed:{
    // 销售任务进度换算百分比
    getProgress(){ 
      let num;
      num = (this.surplusData / 150) * 100 ;
      return num
    },
    // 剩余销售目标百分比    保留了两位小数
    getSurplus(){
      return (100 - ((this.surplusData / 150) * 100)).toFixed(2)
    }
  }
};
</script>

 
 <style lang="scss" scoped>
.home {
  background-color: #f5f5f5;
  height: calc(100vh - 102px);
  overflow-y: scroll;
  padding-bottom: 20px;

  .head {
    height: 264px;
    padding: 38px 34px 6px;
    background-image: url(../assets/head.png);
    background-size: 100% 264px;

    .head-info {
      height: 102px;
      display: flex;

      img {
        width: 102px;
        height: 102px;
        border-radius: 50%;
      }

      .head-info-r {
        margin-left: 22px;
        color: #fff;

        .name {
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
        }

        .phone {
          margin: 6px 0;
        }

        .one {
          background: #f0fdff35;
          border-radius: 16px;
          height: 34px;
          line-height: 36px;
          font-size: 20px;
          background-image: url(../assets/分销商.png);
          background-repeat: no-repeat;
          background-size: 34px;
          padding: 2px 13px 2px 40px;
          box-sizing: content-box;
          zoom: 85%;
        }
      }
    }

    .head-task {
      margin-top: 28px;
      height: 84px;
      border-radius: 6px;
      background-color: rgba(132, 131, 131, 0.33);

      padding: 14px 20px;

      .head-task-data {
        display: flex;
        align-items: center;
        height: 34px;

        .progerss {
          display: flex;
          align-items: center;
          background-color: #e4bd08;
          width: 546px;
          height: 34px;
          border-radius: 17px;
          padding-left: 16px;
          margin-right: 5px;

          span {
            font-size: 20px;
            color: #fff;
            margin-right: 11px;
            zoom: 80%;
          }

          // .container {
          //   width: 440px;
          //   height: 26px;
          //   background: #e4a308;
          //   box-shadow: 0px 0px 3px 0px rgba(154, 47, 0, 0.5);
          //   border-radius: 14px;
          //   .rate {
          //     width: 172px;
          //     height: 24px;
          //     background: linear-gradient(180deg, #f9a553, #e44608);
          //     border-radius: 12px;
          //   }
          // }
          .van-progress {
            width: 440px;
            height: 26px;
            border-radius: 13px;
          }
        }

        .num {
          color: #fff;
        }
      }

      .jy {
        color: #fff;
        font-size: 20px;
        zoom: 90%;
      }
    }
  }

  .sale {
    width: 680px;
    height: 362px;
    background-color: #fff;
    margin: 24px auto 36px;
    padding-top: 15px;

    .sale-title {
      padding: 0 16px;
      margin-bottom: 72px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .sale-title-l {
        display: flex;
        align-items: center;

        img {
          width: 24px;
          height: 22px;
          margin-right: 10px;
        }

        h3 {
          font-size: 28px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #1e1e1e;
        }
      }

      .sale-t {
        color: #a0a0a0;
        display: flex;
        align-items: center;

        img {
          width: 22px;
          height: 22px;
          margin-left: 12px;
        }
      }
    }

    .sale-data {
      padding: 0 28px;

      .sale-data-all {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        margin-bottom: 64px;
      }

      .sale-data-today {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
      }

      .sale-data-item {
        p:first-child {
          font-size: 34px;
          font-weight: bold;
          color: #101010;
        }

        p:last-child {
          font-size: 24px;

          color: #909090;
        }
      }
    }
  }

  .menu-box {
    .menu {
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // margin-top: 100px;

      li {
        flex: 1;
        text-align: center;
        font-size: 28px;
        color: #909090;
        position: relative;
      }

      li:first-child::after {
        content: "";
        width: 1px;
        height: 26px;
        background-color: #101010;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      .active {
        color: #1e1e1e;
        font-weight: 800;
      }

      .active > span {
        padding-bottom: 10px;
        border-bottom: 6px solid #eba206;
      }
    }

    .gen {
      width: 602px;
      height: 70px;
      border-radius: 70px;
      display: block;
      margin: 40px auto;
      border: 0;
      color: #fff;
      background: linear-gradient(225deg, #eba206, #eeb24b);
    }

    .components {
      padding: 10px 34px;
    }
    .policy-com {
      margin-top: 40px;
    }
  }

  .van-popup {
    border-radius: 20px 20px 0 0;
    background: transparent;
  }
  // .qrCom {
  //   position: absolute;
  //   bottom: 300px;
  //   transition: all 0.5s;
  //   opacity: 0;
  // }
  // .qr-op {
  //   opacity: 1;
  // }

  .qr {
    position: relative;
    background: transparent;
  }
  .qr-menu {
    background: white;
    position: absolute;
    bottom: 0px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    li {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      color: #101010;
      font-weight: bold;
      img {
        width: 70px;
        background: #ccc;
        border-radius: 50%;
        padding: 20px;
        box-sizing: content-box;
        margin-bottom: 10px;
      }
    }
  }
}
</style>